<template>
  <div class="list" ref="wrapper">
    <div>
      <!-- 当前城市 -->
      <div class="area">
        <!-- 标题 -->
        <h4 class="title border-topbottom">当前城市</h4>
        
        <!-- 盒子列表 -->
        <ul class="buttom-list">
          <!-- 盒子 -->
          <li class="buttom-wrapper">
            <div class="buttom">{{cityH.city}}</div>
          </li>  

          <!-- 解决高度塌陷问题 -->
          <div class="clear"></div>
        </ul>

      </div>
    
      <!-- 热门城市 -->
      <div class="area">
        <!-- 标题 -->
        <h4 class="title border-topbottom">热门城市</h4>
        
        <!-- 盒子列表 -->
        <ul class="buttom-list">
          <!-- 盒子 -->
          <li class="buttom-wrapper" v-for="item in objCity.hotCities" :key="item.id" @click="handleCityClick(item.name)">
            <div class="buttom">{{item.name}}</div>
          </li>       

          <!-- 解决高度塌陷问题 -->
          <div class="clear"></div>
        </ul>

      </div>

      <!-- 全部城市 -->
      <div class="area" :ref="index" v-for="(cities, index) of objCity.cities" :key="index">
        <!-- 标题 -->
        <h4 class="title border-topbottom">{{index}}</h4>

        <!-- 盒子列表 -->
        <ul class="buttom-list padding-bottom">          
          <!-- 盒子 -->
          <li :class="{'item': true, 'border-bottom': index != cities.length-1 ? true : false }" v-for="(item, index) in cities" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>          
          
          <!-- 解决高度塌陷问题 -->
          <div class="clear"></div>
        </ul>

      </div>
    </div>
  </div>
</template>

<script>
// vuex
import {mapState, mapActions} from "vuex";
// 滚动-插件
import BScroll from '@better-scroll/core';

export default {
  name: "cityList",
  props: ["objCity"],
  data() {
    return {
      scroll: null,
    }
  },
  mounted() {
    // 滚动-插件-使用
    const options = {
      click: true,
      tap: true,
    }
    this.scroll = new BScroll(this.$refs.wrapper, options);

    // 全局事件总线-点击左侧导航栏
    this.$bus.$on("dataFuntClick", (value) => {
      // 锚点定位
      this.scroll.scrollToElement(this.$refs[value][0]);
    });

    this.changecity
  },
  computed: {
    // 所在城市 state
    ...mapState({cityH: "city"}),    
  },
  methods: {
    // 点击城市 actions
    ...mapActions({changecity: "changecity"}),

    handleCityClick(name) {      
      this.$store.dispatch("changecity", name);

      this.changecity(name);      
      this.$router.push("/");
    }
  }
}
</script>

<style scoped>  
  .border-topbottom::before {
    content: "";
    background-color: #ccc;
  }
  .border-topbottom::after {
    content: "";
    background-color: #ccc;
  }
  .border-bottom::before {
    content: "";
    background-color: #ccc;
  }

  /* 为了解决浮动塌陷问题 */
  .clear {
    clear: both;
  }

  /* 容器 */
  .list {
    position: absolute;
    top: 79px;
    left: 0px;
    right: 0px;
    bottom: 0px;

    overflow: hidden;
  }
  /* 图标 */
  .title {
    line-height: 32px;
    background-color: #eee;
    padding-left: 10px;
    color: #666;
    font-size: 13px;
  }


  /* 盒子列表 */
  .buttom-list {
    padding: 5px;   
    padding-right: 30px;   
  }
  /* 盒子 */
  .buttom-list .buttom-wrapper {
    float: left;
    width: 33.33%;
  }
  .buttom-list .buttom-wrapper .buttom {
    margin: 5px;    
    padding: 5px 0px;
    border-radius: 3px;
    border: 3px solid #ccc;

    text-align: center;
  }


  /* 全部城市列表 */
  .padding-bottom {
    padding-bottom: 0px;
  }

  .buttom-list .item {
    line-height: 27px;

    color: #666;
    padding-left: 5px;
  }
</style>